<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 130px; width: 100%"></div>
		<!-- <el-input v-model="emojisOutput" type="textarea" />
		<div class="f f-j-c">
			<Picker :data="emojiIndex" set="twitter" @select="showEmoji" />
		</div> -->
		<div class="chat m1280 f f-a-c">
			<div class="leftList">
				<div>
					<div class="topAll">All message</div>
					<div class="searchBox f f-a-c">
						<img src="/src/assets/sceh.png" alt="" />
						<input type="text" v-model="search" placeholder="Search" class="inp" name="" id="" />
					</div>
				</div>
				<div class="list">
					<div v-for="(item, index) in conversationList" :key="item.id" @click="qieList(item, index)" :class="{ active: inds == index, actiTop: index == inds - 1 }" class="listItem hand f f-a-c">
						<div class="lefImg"><img :src="item.avatar" alt="" /></div>
						<div class="right">
							<div class="nameBox f f-a-c f-j-b">
								<div class="name">{{ item.username }}</div>
								<div class="time">{{ item.time }}</div>
							</div>
							<div class="count">{{ item.myDescribe }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="centerView">
				<div class="topImg f f-a-c f-j-b" v-if="current">
					<div class="lefBox f f-a-c">
						<div class="imgBox">
							<img :src="current.avatar" alt="" />
							<div class="dian"></div>
						</div>
						<div class="nameBox">
							<div class="name">{{ current.username }}</div>
							<div class="count">{{ current.myDescribe }}</div>
						</div>
					</div>
					<div class="hand rigBtn">${{ current.lowPrice || 0 }} / 30mins</div>
				</div>
				<!-- 这里是聊天内容 -->
				<div class="chats hand">
					<div v-for="(item, index) in list" :key="index" class="cahtItem">
						<div v-if="item.pos == 'left'" class="left f">
							<div class="lefImg"><img :src="item.img" alt="" /></div>
							<div class="count">
								{{ item.count }}

								<div class="time">{{ item.time }}</div>
							</div>
						</div>
						<div v-else class="f" style="justify-content: end">
							<div class="right f">
								<div class="count">
									{{ item.count }}
									<div class="time">{{ item.time }}</div>
								</div>
								<div class="lefImg"><img :src="item.img" alt="" /></div>
							</div>
						</div>
					</div>
				</div>
				<div class="inps">
					<div class="xian"></div>
					<div class="inpss f f-a-c f-j-b">
						<div v-if="baioShow" class="biaoqing">
							<Picker :data="emojiIndex" set="twitter" @select="showEmoji" />
						</div>
						<input type="textarea" @keyup.enter="keydown" @focus="fouse" v-model="emojisOutput" class="botMessage" placeholder="Message.." name="" id="" />
						<div class="rigImg f f-a-c">
							<img src="/src/assets/user/6.png" alt="" />
							<img src="/src/assets/user/9.png" alt="" />
							<img @click.stop="Biaoqing" class="hand" src="/src/assets/user/10.png" alt="" />
						</div>
					</div>
				</div>
			</div>
			<!-- wadwefewfqwwq -->
			<div class="rigPorie f f-d-c f-a-c">
				<div class="topImg">
					<img src="/src/assets/tou.png" alt="" />
					<div class="dian"></div>
				</div>
				<div class="Joshu">Joshua Brown</div>
				<div class="tit">📍Seattle | 20:40</div>
				<div class="review">Rating: 4.7 / 5 (147 Reviews)</div>
				<div class="topcs f f-a-c f-w-w f-j-c">
					<div class="topics">Topics：</div>
					<div class="topItem">Managerial finance</div>
					<div class="topItem">VC</div>
				</div>
				<div class="review">Typically responds in 3h</div>
				<div class="btn hand">View Profile</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ChatToken } from "@/api/xpert.js";
	import data from "emoji-mart-vue-fast/data/all.json";
	import "emoji-mart-vue-fast/css/emoji-mart.css";
	import { Picker, EmojiIndex } from "emoji-mart-vue-fast/src";
	import { ref, onMounted, computed, watch } from "vue";

	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import { useCommunication } from "../../hooks/useCommunication";
	import { useConversationList } from "./useConversationList";
	import dayjs from "dayjs";
	import { useLocalStorage } from "../../hooks/localStorage";

	let token = ref("");
	let statusTab = ref(1);

	let inds = ref();
	let baioShow = ref(false);
	let search = ref("");

	const emojiIndex = new EmojiIndex(data);
	// 输入框聊天内容
	const emojisOutput = ref("");
	// 点击弹出表情
	const Biaoqing = () => {
		baioShow.value = !baioShow.value;
	};
	// 当输入框聚焦时使表情框消失
	const fouse = () => {
		baioShow.value = false;
	};
	// 点击回车键执行的操作

	const keydown = async () => {
		// 如果初始化没有成功禁止
		if (!available.value) {
			return;
		}
		// 发送消息
		await send(emojisOutput.value);
		// 清空
		emojisOutput.value = "";
	};
	// 当选择表情包之后加到输入框内
	const showEmoji = emoji => {
		emojisOutput.value = emojisOutput.value + emoji.native;
		baioShow.value = false;
	};

	const initInputTokens = async () => {
		let n = await ChatToken();
		token.value = n.data;
	};
	initInputTokens();

	/*
	 * 这里演示的是直接在聊天室场景使用，但是通常还有其他情况使用，例如
	 * 如果在对方主页切换过来，你需要从路由获取到对方的id，大概是34_3这样的，之后直接调用
	 * switchBinding('34_3') 这样就可以了
	 */

	const { available, send, switchBinding, conversations, conversationHistory, myIdentity } = useCommunication({ token: token });
	const conversationList = useConversationList(conversations, { search });

	let current = ref(null);
	// 监听conversationList变化，如果过滤生效且current不存在直接关闭
	watch(conversationList, () => {
		if (!current.value) {
			return;
		}

		current.value = conversationList.value.find(f => f.id === current.value.id);
	});

	onMounted(async () => {
		window.addEventListener("scroll", handleScroll);
	});

	const userInfo = useLocalStorage("userInfo", {});
	let list = computed(() => {
		if (!current.value) {
			return [];
		}
		return conversationHistory.value.map(f => {
			// 右边代表自己，左边代表对话的人
			const isRight = myIdentity.value === f.author;
			return {
				img: isRight ? userInfo.value.avatar : current.value.avatar,
				count: f.body,
				time: dayjs(f.dateUpdated).format("HH:mm"),
				pos: isRight ? "right" : "left"
			};
		});
	});

	// 切换
	const qieList = (item, index) => {
		current.value = item;
		// 切换绑定
		switchBinding({ yourLogo: item.partyId });
		inds.value = index;
	};

	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 50) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
